<template>
  <div class="g-container">
    <div class="avatar"></div>
    <p>blur shadow</p>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
$img: "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg";

.g-container {
  width: 200px;
  margin: 20px auto;
  position: relative;
  z-index: 0;

  .avatar {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url($img) no-repeat center center;
    background-size: 100% 100%;

    &::after {
      content: "";
      position: absolute;
      // top: 10%;
      left: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      background-size: 100% 100%;
      border-radius: 50%;
      transform: scale(0.95);
      // filter: blur(10px) brightness(80%) opacity(0.8);
      z-index: -1;
      animation: filterChange 10s infinite linear;
    }
  }
  p {
    margin-top: 30px;
    text-align: center;
    font-size: 28px;
  }
}
@keyframes filterChange {
  0% {
    top: 0;
    filter: blur(0) brightness(101%) opacity(1);
  }
  40% {
    top: 10%;
    filter: blur(0) brightness(101%) opacity(1);
  }
  80% {
    top: 10%;
    filter: blur(10px) brightness(80%) opacity(0.8);
  }
  100% {
    top: 10%;
    filter: blur(10px) brightness(80%) opacity(0.8);
  }
}
</style>